<template>

	<view class="content">
		<view class="image">
			<image :src="item.picurl" mode="aspectFill"></image>
		</view>
		<view class="desc">
			<view class="title">
				{{item.title}}
			</view>
			<view class="info">
				<view class="author">
					{{item.author}}
				</view>
				<view class="date">
					<view v-if="page=='user'">浏览时间：{{item.historyTime}}</view>
					<view v-else>{{item.hits}}浏览</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		name: "ListItem",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object,
				default: []
			},
			page:{
				type:String,
				default:''
			}
		},
		
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
	.content {
		overflow: hidden;
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		

		display: flex;

		.image {
			width: 150rpx;
			height: 130rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.desc {
			position: relative;
			flex: 1;
			margin-left: 20rpx;

			.title {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列

			}

			.info {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				color: gray;
				font-size: 15rpx;

				.author {
					
					margin-right: 30rpx;
					font-size: 25rpx;
					white-space: nowrap;
				}
				.date{
					flex: 1;
					font-size: 25rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
